// pages/doodle/doodle.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  draw: function () {

    var ctx = this.ctx
    // Draw coordinates
    ctx.arc(100, 75, 50, 0, 2 * Math.PI)
    ctx.setFillStyle('#eee')
    ctx.fill()

    ctx.beginPath()
    ctx.moveTo(40, 75)
    ctx.lineTo(160, 75)
    ctx.moveTo(100, 15)
    ctx.lineTo(100, 135)
    ctx.setStrokeStyle('#AAAAAA')
    ctx.stroke()

    ctx.setFontSize(12)
    ctx.setFillStyle('black')
    ctx.fillText('0', 165, 78)
    ctx.fillText('0.5*PI', 83, 145)
    ctx.fillText('1*PI', 15, 78)
    ctx.fillText('1.5*PI', 83, 10)

    // Draw points
    ctx.beginPath()
    ctx.arc(100, 75, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('lightgreen')
    ctx.fill()

    ctx.beginPath()
    ctx.arc(100, 25, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()

    ctx.beginPath()
    ctx.arc(150, 75, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()

    // Draw arc
    ctx.beginPath()
    ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
    ctx.setStrokeStyle('#333333')
    ctx.stroke()

    ctx.draw(true)
  },

  clear:function(){
    this.ctx.clearRect(0,0,320,320)
    this.reset()
  },

  //初始化坐标系
  reset:function(){
    this.ctx.setStrokeStyle('#999')
    this.ctx.beginPath()
    this.ctx.moveTo(0,160)
    this.ctx.lineTo(320,160)
    this.ctx.moveTo(160,320)
    this.ctx.lineTo(160,0)
    this.ctx.stroke()

    //绘制数轴上的点
    for(var i=0;i<7;i++){
      //x轴
      this.ctx.beginPath()
      this.ctx.moveTo(i*50+10,160)
      this.ctx.lineTo(i*50+10,155)
      this.ctx.stroke()
      this.ctx.setFontSize(12)
      this.ctx.setFillStyle('black')
      if(i!=3){
        this.ctx.fillText(''+(i-3), i*50 + 5, 175)
      }
  

      //y轴
      this.ctx.beginPath()
      this.ctx.moveTo(160,i*50+10)
      this.ctx.lineTo(165,i*50+10)
      this.ctx.stroke()
      if(i!=3){
        this.ctx.fillText(''+(i-3), 145, 315-i*50)
      }
    }

    this.ctx.draw(true)
  },

  drawLine:function(){
    //通过计算定位坐标点
    //y = 2x + 1
    /**
     * 坐标轴上两点为（-0.5,0）（0,1）
     * 实际坐标轴上两点为 (135,160) (160,110)
     * 每个像素点相当于0.02个数轴单位长度
     * x、y与实际的x1，y1的关系为 x1=x*50+160, y1=160-y*50
     */
    var startX = (-3.2) * 50 + 160
    var startY = 160 - (2 * (-3.2) + 1) * 50
    this.ctx.beginPath()
    this.ctx.setStrokeStyle('#f00')
    this.ctx.moveTo(startX,startY)
    for(var x=-3.2;x<=3.2;x+=0.02){
      var y = 2 * x + 1
      this.ctx.lineTo(x*50+160,160-y*50)
    }
    this.ctx.stroke()
    this.ctx.draw(true)

  },

  drawParabola:function(){
    //抛物线坐标
    //y=x2-2
    /**
     * 坐标系上三点为（-1,-1）（0,-2）（1,-1）
     * 实际坐标系上为（110,210）（160,260）（210,210）
     * 可得 xy与实际大小x1、y1的关系是 x1=x*50+160, y1=160-y*50
     */
    var startX = (-3.2) * 50 + 160
    var startY = 160 - ((-3.2)*(-3.2)-2) * 50
    this.ctx.setStrokeStyle('#09f')
    this.ctx.beginPath()
    this.ctx.moveTo(startX,startY)
    for(var x=-3.2;x<=3.2;x+=0.02){
      var y=x*x-2
      this.ctx.lineTo(x*50+160,160-y*50)
    }
    this.ctx.stroke()
    this.ctx.draw(true)
  },

  drawSin:function(){
    //正弦曲线
    //y=sinx
    /**
     * 根据前两个例子可知
     * x、y与实际大小x1、y1的关系是 x1=x*50+160, y1=160-y*50
     */
    var startX = (-3.2) * 50 + 160
    var startY = 160 - Math.sin(-3.2) * 50
    this.ctx.setStrokeStyle('#0c0')
    this.ctx.beginPath()
    this.ctx.moveTo(startX,startY)
    for(var x=-3.2;x<=3.2;x+=0.02){
      var y=Math.sin(x)
      this.ctx.lineTo(x*50+160,160-y*50)
    }
    this.ctx.stroke()
    this.ctx.draw(true)
  },

  drawPow:function(){
    //指数函数曲线
    //y=2^x
    /**
     * 根据前两个例子可知
     * x、y与实际大小x1、y1的关系是 x1=x*50+160, y1=160-y*50
     */
    var startX = (-3.2) * 50 + 160
    var startY = 160 - Math.pow(2,-3.2) * 50
    this.ctx.setStrokeStyle('#fc0')
    this.ctx.beginPath()
    this.ctx.moveTo(startX,startY)
    for(var x=-3.2;x<=3.2;x+=0.02){
      var y=Math.pow(2,x)
      this.ctx.lineTo(x*50+160,160-y*50)
    }
    this.ctx.stroke()
    this.ctx.draw(true)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.ctx = wx.createCanvasContext('myCanvas')
    this.reset()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})